<template>
  <div>
    <!-- 导出按钮 -->
    <button class="downPDFbtn" :disabled="isExporting" @click="exportToPDF">
      {{ isExporting ? '正在导出...' : '导出PDF' }}
    </button>

    <!-- 隐藏的内容区域，用于生成PDF -->
    <div id="pdf-content" class="pdfBox">
      <!-- 第一页 -->
      <div class="pdf-page pdf-page-first">
        <div class="main-title">课堂行为分析报告</div>
        <div class="sub-title">{{ pdfAllData.className }}</div>
        <div class="page-text-1"> 导读：本报告作为一个教学智能辅助工具，通过智能采集教学过程中师生行为等教学数据，辅助您客观地分析教情学情，从而达到提升教学质量的目的。 </div>
        <div class="page-text-1"> 
          <p>本报告包含以下几个方面：</p> 
          <p>• 课堂教学行为数据采样统计。通过您设置的采样间隔时间，对课堂视频画面进行自动采样统计，形成统计数据表。</p>
          <p>• ST图、Rt-Ch图表分析。对教学行为数据进行深度分析整理，形成ST、Rt-Ch图表，为教学质量分析提供依据。</p>
          <p>• 课堂语音实录。自动进行高频词分析、预设的关键词统计、语速分析。对教师授课的语音部分进行智能采集，为教学质量分析提供依据。</p>
        </div>
      </div>

      <!-- 第二页 -->
      <div class="pdf-page">
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>行为数据统计</span></div>

          <div class="pageIn-two">
            <div class="pageIn-two-in" style=" background: #fff;">
              <div class="innerLine" style="border-bottom:1px solid #d3d6dd">
                <div class="roleTitle">老师</div>
                <div class="actionLine">
                  <div class="actionItem">
                    <div>教师讲授</div>
                    <div>{{ pdfAllData.actionTable[0] }}</div>
                  </div>
                  <div class="actionItem actionBg">
                    <div>指导学生</div>
                    <div>{{ pdfAllData.actionTable[1] }}</div>
                  </div>
                  <div class="actionItem">
                    <div>老师巡视</div>
                    <div>{{ pdfAllData.actionTable[2] }}</div>
                  </div>
                </div>
              </div>
              <div class="innerLine">
                <div class="roleTitle">学生</div>
                <div class="actionLine">
                  <div class="actionItem actionBg">
                    <div>学生汇报</div>
                    <div>{{ pdfAllData.actionTable[3] }}</div>
                  </div>
                  <div class="actionItem">
                    <div>师生互动</div>
                    <div>{{ pdfAllData.actionTable[4] }}</div>
                  </div>
                  <div class="actionItem actionBg">
                    <div>生生互动</div>
                    <div>{{ pdfAllData.actionTable[5] }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pageIn-two-in">
              <fuctionLine v-if="pdfAllData.action1" :action-data="pdfAllData.action1" :label-color="labelColor" />
              <fuctionLine v-if="pdfAllData.action2" :action-data="pdfAllData.action2" :label-color="labelColor" />
              <fuctionLine v-if="pdfAllData.action3" :action-data="pdfAllData.action3" :label-color="labelColor" />
              <fuctionLine v-if="pdfAllData.action4" :action-data="pdfAllData.action4" :label-color="labelColor" />
              <fuctionLine v-if="pdfAllData.action5" :action-data="pdfAllData.action5" :label-color="labelColor" />
              <fuctionLine v-if="pdfAllData.action6" :action-data="pdfAllData.action6" :label-color="labelColor" />
            </div>
          </div>

          <div class="rtChData-txt">
            <p style=" color: #000;margin-bottom: 20px; ">通过对教师全景和学生全景两路画面的综合分析、判断，以一定时间为间隔(可手动配置)，对课堂内容进行采样，并根据样本点的行为类别，以相应的符号S或T计入，由此构成S-T时序列数据，绘制S-T图。</p>
            <p>• 当曲线偏向T轴时，表示课堂中教师活动占多数，当曲线偏向S轴时，表示课堂中学生活动占多数</p>
            <p>• 当曲线整体平行于45度线时，表示在此时间段师生互动充分，占比相当</p>
          </div>

          <div class="pageNum">01</div>

        </div>

      </div>

      <!-- 第三页 -->
      <div class="pdf-page">
        
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>课堂时间分配</span></div>
          <div class="pageIn-leftChart">
            <div style="width:40%; ">
              <halfCircle v-if="pdfAllData.percentData" :percent-data="pdfAllData.percentData" />
            </div>
           
            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <p style=" color: #000;margin-bottom: 20px; ">通过对教师全景和学生全景两路画面的综合分析、判断，以一定时间为间隔(可手动配置)，对课堂内容进行采样，并根据样本点的行为类别，以相应的符号S或T计入，由此构成S-T时序列数据，绘制S-T图。</p>
              <p>• 当曲线偏向T轴时，表示课堂中教师活动占多数，当曲线偏向S轴时，表示课堂中学生活动占多数</p>
              <p>• 当曲线整体平行于45度线时，表示在此时间段师生互动充分，占比相当</p>
            </div>
          </div>
        </div>

        <div class="pageNum">02</div>
      </div>


      <!-- 第四页 -->
      <div class="pdf-page">
        
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>S-T教学行为分析</span></div>
          <div class="pageIn-leftChart">
            <div style="width:40%; padding-left: 30px; ">
              <div class="gridTitleVertical2">学<br>生<br>行<br>为<br>时<br>间<br>(分)</div>
              <lineChart v-if="pdfAllData.stData" :st-data="pdfAllData.stData" :grid-set="pdfAllData.gridSet" />
              <div class="gridTitle2">老师行为时间(分)</div>
            </div>
           
            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <p style="color: #000;margin-bottom: 20px; ">通过对教师全景和学生全景两路画面的综合分析、判断，以一定时间为间隔(可手动配置)，对课堂内容进行采样，并根据样本点的行为类别，以相应的符号S或T计入，由此构成S-T时序列数据，绘制S-T图。</p>
              <p>• 当曲线偏向T轴时，表示课堂中教师活动占多数，当曲线偏向S轴时，表示课堂中学生活动占多数</p>
              <p>• 当曲线整体平行于45度线时，表示在此时间段师生互动充分，占比相当</p>
            </div>
          </div>
        </div>
        <div class="pageNum">03</div>
      </div>

      <!-- 第五页 -->
      <div class="pdf-page">
        
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>Rt-Ch图</span></div>
          <div class="pageIn-leftChart">
            <div style="width:40%;display: flex; flex-direction: column; align-items: center; justify-content: center; ">
              <div class="dataBoxTwo">
                <div class="dataBoxTwo-title">Ch</div>
                <div class="dataBoxTwo-left">
                  <triangleLine v-if="pdfAllData.RtChData" :rt-ch-data="pdfAllData.RtChData" />
                  <div class="dataBoxTwo-title2">Rt</div>
                </div>
              </div>  
              <div class="rtch-data">
                <div>互动类型：<span>{{ pdfAllData.reactType }}</span></div>
                <div>Rt/ch: <span>{{ pdfAllData.RtChData[0][0] }}/{{ pdfAllData.RtChData[0][1] }}</span></div>
                <div>互动转换指数：<span>{{ typeof pdfAllData.reactRate === 'number' ? pdfAllData.reactRate.toFixed(2) : '--' }}%</span></div>
              </div>
            </div>        
            
            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <p style="color: #000;">Rt是指教师行为的占有比例，此值越大说明数师行为越多。Ch是教师行为与学生行为之间的转换次数，此值越大说明教师-学生行为的转换次数越多。</p>
              <p style="margin-bottom: 20px; color: #000; ">四种教学模式:练习型、讲授型、对话型、混合型是联合Rt和Ch的值来划分的。</p>
              <p>• 对话型的显著特点是Ch值，也就是师生转换次数，比较高，此种模式师生之间互动充分</p>
              <p>• 讲授型的显著特点是Rt值，也就是教师行为比例，比较高，此种模式以教师讲授为主</p>
              <p>• 当教师行为占有率较低时，此时以学生活动为主，为练习型</p>
              <p>• 当教师行为占有率在一半附近时，此时教师、学生均充分参与，为混合(探究)型</p>
            </div>

          </div>
        </div>

        <div class="pageNum">04</div>
      </div>


      <!-- 第六页 -->
      <div class="pdf-page">
            
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>语音分析-高频词</span></div>
          <div class="pageIn-leftChart">
            <div style="width:40%; ">
              <el-table :data="sortedModalWords1" style="width: 100%;">
                <el-table-column label="序号" align="center" width="100">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="text" label="词语" align="center" />
                <el-table-column prop="count" label="频次" align="center" />
              </el-table>
            </div>

            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <p v-if="pdfAllData.modalWords1.length > 0" style="color: #000;">本次课堂高频词前10个，<span>“{{ pdfAllData.modalWords1[0].text }}”</span>出现频率最高，共<span>{{ pdfAllData.modalWords1[0].count }}次</span>。</p>
              <p v-else>暂无高频词</p>
              <p style="margin-bottom: 20px; color: #000; ">说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
            </div>

          </div>
        </div>
        <div class="pageNum">05</div>
      </div>

      <!-- 第七页 -->
      <div class="pdf-page">
            
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>语音分析-关键词</span></div>
          <div class="pageIn-leftChart">
            <div style="width:40%; ">
              <el-table :data="sortedModalWords2" style="width: 100%;">
                <el-table-column label="序号" align="center" width="100">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="text" label="词语" align="center" />
                <el-table-column prop="count" label="频次" align="center" />
              </el-table>
            </div>

            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <p v-if="pdfAllData.modalWords2.length > 0" style="color: #000;">本次课堂高频词前10个，<span>“{{ pdfAllData.modalWords2[0].text }}”</span>出现频率最高，共<span>{{ pdfAllData.modalWords2[0].count }}次</span>。</p>
              <p v-else>暂无关键词</p>
              <p style="margin-bottom: 20px; color: #000; ">说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
              <p>• 说明说明说明说明说明说明说明说明说明说明说明说明说明。</p>
            </div>

          </div>
        </div>
        <div class="pageNum">06</div>
      </div>


      <!-- 第八页 -->
      <div class="pdf-page">
            
        <div class="pdf-page-in">
          <div class="page-title"><img src="../../assets/pdf/title-pic.png" /><span>语速分析</span></div>
          <div class="voicePop-textLine">
            教师语速是否合理科学直接影响教学效果，标准语速建议为<span>200-250字/分钟</span>；语速过快会导致学生没有足够的时间来思考、吸收、记忆；反之会导致学生的精力涣散。
          </div>
          <div class="pageIn-leftChart">
            <div style="width:30%;display: flex; flex-direction: column; align-items: center; ">
              <div class="speed-circle">
                <span style="font-size: 52px;">{{ pdfAllData.speakingSpeed }}</span>
                <span>字/分</span>
              </div>
              <div style="margin-top: 20px;">平均语速</div>
            </div>

            <div class="rtChData-txt" style="flex: 1;margin:0 5% 0 30px">
              <div style="color: #333; font-size: 16px;margin-bottom: 20px;">最长发言<span style="color: #efb300;">{{ pdfAllData.maxSpeakingTime }}s</span></div>
              <p style="margin-bottom: 20px;  ">{{ pdfAllData.maxSpeakingText }}</p>

            </div>

          </div>
        </div>
        <div class="pageNum">07</div>
      </div>
    


    </div>

  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

// 图表
import fuctionLine from './charts/fuctionLine.vue'
import halfCircle from './charts/halfCircle.vue'
import lineChart from './charts/lineChart.vue'
import triangleLine from './charts/triangleLine.vue'

export default {
  name: 'PdfExport',
  components: { fuctionLine, halfCircle, lineChart, triangleLine },
  props: {
    // 定义接收的props
    pdfAllData: {
      type: Object, // 添加类型定义
      default: () => ({}) // 添加默认值
    }
  },
  data() {
    return {
      labelColor: '#333',
      actionData: [
        {
          role: '老师',
          action: '教师讲授',
          times: 56
        },
        {
          role: '老师',
          action: '指导学生',
          times: 56
        },
        {
          role: '老师',
          action: '老师巡视',
          times: 56
        },
        {
          role: '学生',
          action: '学生汇报',
          times: 56
        },
        {
          role: '学生',
          action: '师生互动',
          times: 56
        },
        {
          role: '学生',
          action: '生生互动',
          times: 56
        }
      ],
      // 这里使用一个示例图片，你可以替换为自己的图片
      imageSrc: '',
      isExporting: false
    }
  },

  computed: {
    sortedModalWords1() {
      return [...this.pdfAllData.modalWords1].sort((a, b) => b.count - a.count)
    },
    sortedModalWords2() {
      return [...this.pdfAllData.modalWords2].sort((a, b) => b.count - a.count)
    }
  },

  created() {
    console.log('---------------data', this.pdfAllData.RtChData )
  },
  methods: {
    async exportToPDF() {
      try {
        this.isExporting = true;
        this.$message('正在生成PDF，请稍候...');

        const element = document.getElementById('pdf-content');
       // element.style.display = 'block';

        // 设置 PDF 为横向，单位 px，尺寸 1366×768
        const pdf = new jsPDF('l', 'px', [1366, 768]);

        const pages = element.querySelectorAll('.pdf-page');

        for (let i = 0; i < pages.length; i++) {
          const originalDisplay = pages[i].style.display;
         // pages[i].style.display = 'block';

          const canvas = await html2canvas(pages[i], {
            scale: 2,
            logging: false,
            useCORS: true,
            allowTaint: true
          });

          const imgData = canvas.toDataURL('image/jpeg', 1.0);
          const imgWidth = 1366;  // 设置 PDF 页面宽度 1366px
          const imgHeight = 768;  // 设置 PDF 页面高度 768px

          if (i !== 0) {
            pdf.addPage([1366, 768], 'l'); // 添加新页，尺寸相同
          }

          // 保持图片比例，居中显示（避免拉伸）
          const scale = Math.min(
            imgWidth / canvas.width,
            imgHeight / canvas.height
          );
          const scaledWidth = canvas.width * scale;
          const scaledHeight = canvas.height * scale;
          const offsetX = (imgWidth - scaledWidth) / 2;
          const offsetY = (imgHeight - scaledHeight) / 2;

          pdf.addImage(
            imgData,
            'JPEG',
            offsetX,
            offsetY,
            scaledWidth,
            scaledHeight
          );

          pages[i].style.display = originalDisplay;
        }

        element.style.display = 'none';
        pdf.save('exported-document.pdf');

        this.isExporting = false;
        this.$message({
          message: 'PDF导出成功！',
          type: 'success'
        });
      } catch (error) {
        console.error('导出PDF失败:', error);
        this.isExporting = false;
        this.$message.error('PDF导出失败: ' + error.message);

        const element = document.getElementById('pdf-content');
        if (element) element.style.display = 'none';
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.export-btn {
  padding: 10px 20px;
  background-color: #428bca;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

.export-btn:hover:not(:disabled) {
  background-color: #3071a9;
}

.export-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* PDF内容样式 */
.pdf-page {
  width: 1366px;
  height: 768px;
  padding: 30px;
  box-sizing: border-box;
  background:url('../../assets/pdf/bg.png') 100% 100% no-repeat;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pdf-page-in{
  background: #f5f9fe;
  height: 708px;
  padding:40px;
  display: flex;
  flex-direction: column;
}
.pdf-page-first{
  padding:100px;
}

.lineHeight {
  margin: 0;
  border-bottom: 1px solid #f8f8f9;
}
.lineHeight:last-child {
  margin: 0;
  border-bottom: none;
}

.line-chart {
  height: 282px;
}

.main-title {
  color: #0058bd;
  font-size: 68px;
  font-weight: bold;
  text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.5);
}

.sub-title {
  font-size: 32px;
  color: #222222;
  margin-top: 38px;
  margin-bottom: 50px;
}
.page-text-1{
  margin-top:30px;
  color: #333;
}

.page-title {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: 34px;
  color: #0058bd;
  font-weight: bold;
}

.page-title span{
 margin-left: 10px;
}

.data-table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.pdf-image {
  display: block;
  max-width: 80%;
  height: auto;
  margin: 30px auto;
  border: 1px solid #eee;
}

.message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
}

.message.success {
  background-color: #dff0d8;
  color: #3c763d;
  border: 1px solid #d6e9c6;
}

.message.error {
  background-color: #f2dede;
  color: #a94442;
  border: 1px solid #ebccd1;
}

.pdfBox {
  width: 1366px;
  background: rgb(255, 46, 46);
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  overflow: auto;
  height: 100vh;
}

.pageNum {
  font-size: 22px;
  color: #0058bd;
  position: absolute;
  right: 48px;
  bottom: 46px;
  font-weight: bold;
}
.innerActs{
  color: #333;
}
.actionItem div{
  border-left: 1px solid #ddd;
}
.pdf-page .lineHeight{
  background: #fff;
}
.rtChData-box{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.dataBoxTwo-Tip{
  background: rgba(255, 211, 211, 0.3);
}
.dataBoxTwo-Tip2{
  background: rgba(190, 218, 255, 0.3);
  font-size: 14px;
}
.dataBoxTwo-Tip2 span{
  font-size: 18px;
}
.dataBoxTwo-Tip3{
  background: rgb(195 237 220 / 30%);
  border: 2x solid #43d79e;
  color: #44b1a8;
}
.voicePop-textLine{
  color: #333;
  margin-top: 30px;
}
.voiceBox span{
  color: #333;
}
.voicePop-inBox2{
  background: #f8f8f9;
  border:1px solid #dfe6ec
}
.voicePop-textLine span{
  color: #efb300;
}
.actionBg{
  background: #f8f8f9;

}
.gridTitle2{  
  text-align: center;
  color: #333;
  font-size: 13px;
}

.gridTitleVertical2{
  color: #333;
  font-size: 13px;
  position: absolute;
  width: 1em;
  height: 300px;
  text-align: center;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rtChData-txt {
  margin-top:30px;
  line-height: 24px;
}
.rtChData-txt p{
  list-style-type: circle;
  font-size: 14px;
  color: #505050;
}
.pageIn-two{
  height: 322px;
    margin-top: 30px;
    display: flex;
    gap: 20px;
}
.pageIn-two-in{
  flex: 1;
  height: 100%; 
  color: #333;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(211, 214, 221);
}
.pageIn-leftChart{
  flex: 1;
  display: flex;
  align-items: center;
}
.rtch-data{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  font-size: 14px;
  flex-direction: column;
  text-align: center;
  line-height: 27px;
}
.speed-circle{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid #ffb400;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #ffb400;
}
</style>
